<template>
	<view>
		<van-nav-bar title="我的收货地址" left-text="返回" left-arrow @click-left="onClickLeft" />
		<view class="">
			<button @click="NewAddress" style="width: 60%;margin-left: 20%;background-color: cornflowerblue;color: white;margin-top: 30rpx;">新增地址</button>
		</view>
		<van-dialog use-slot title="新增地址" :show="showAddress" show-cancel-button @confirm="getAddress"
			@cancel="CloseAddress">
			<view style="display:flex">
				<view style="margin-left: 30rpx;font-size: 40rpx;">
					收货人：
				</view>
				<input style="margin-left: 40rpx;" v-model="userName" placeholder="请输收货人姓名">
			</view>
			<view style="display:flex">
				<view style="margin-left: 30rpx;font-size: 40rpx;">
					电话号：
				</view>
				<input style="margin-left: 40rpx;" v-model="userTel" placeholder="请输入收货人电话">
			</view>
			<view style="display:flex">
				<view style="margin-left: 30rpx;font-size: 40rpx;">
					省份：
				</view>
				<input style="margin-left: 80rpx;" v-model="province" placeholder="请输入收货省份">
			</view>
			<view style="display:flex">
				<view style="margin-left: 30rpx;font-size: 40rpx;">
					城市：
				</view>
				<input style="margin-left: 80rpx;" v-model="city" placeholder="请输入收货城市">
			</view>
			<view style="display:flex">
				<view style="margin-left: 30rpx;font-size: 40rpx;">
					区县：
				</view>
				<input style="margin-left: 80rpx;" v-model="county" placeholder="请输入收货区县">
			</view>
			<view style="display:flex">
				<view style="margin-left: 30rpx;font-size: 40rpx;">
					详细地址：
				</view>
				<input v-model="detailedAddress" placeholder="请输入详细地址">
			</view>
			<view style="display:flex">
				<view style="margin-left: 30rpx;font-size: 40rpx;">
					备注信息：
				</view>
				<input v-model="info" placeholder="请输入备注信息">
			</view>
		</van-dialog>
		
		<view v-for="(item,index) in MyAddress" :key="index">
			<view style="display: flex;margin-left: 3%;margin-top: 40rpx;">
				<view style="width: 76%;">
					<view class="">
						<span style="font-weight: bold;">{{item.person}}</span><span style="color: gray;margin-left: 50rpx;">{{item.personPhone}}</span>
					</view>
					<view style="margin-top: 10rpx;">
						{{item.province+item.city+item.district+item.address}}
					</view>
				</view>
				<view style="width: 18%;line-height:100%;">
					<button @click="deleteAddress(item)" style="height: 50rpx;line-height:50rpx;font-size: 30rpx;background-color:gainsboro;color:orange">删除</button>
				</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	import request from '../../com/request.js'
	export default {
		data() {
			return {
				MyAddress:[],
				showAddress:false,
				userName:"",
				userTel:"",
				province:"",//省份
				city:"",//城市
				county:"",//区县
				detailedAddress:"",//详细地址
				info:""
			}
		},
		methods: {
			onClickLeft(){
				uni.redirectTo({
					url: '/pages/MessageSettings/MessageSettings'
				});
			},
			NewAddress(){
				this.showAddress=true
			},
			getAddress(){
				request({
					url: 'api/NewAddress/get',
					data: {
						acc: uni.getStorageSync("userTel"),
						name:this.userName,
						phone:this.userTel,
						province:this.province,
						city:this.city,
						county:this.county,
						addressDetail:this.detailedAddress,
						areaCode:this.info
					},
					success: (resp) => {
						uni.showToast({
							title: '新增成功',
						})
						this.selectAddress()
					}
				})
				this.showAddress=false
			},
			CloseAddress(){
				this.showAddress=false
			},
			selectAddress(){
				request({
					url: 'api/viewAddress/get',
					data: {
						acc: uni.getStorageSync("userTel")
					},
					success: (resp) => {
						
						this.MyAddress=resp.data.data
						console.log(this.MyAddress,48);
					}
				})
			},
			deleteAddress(item){
				request({
					url: 'api/onDelete/get',
					data: {
						updateaddId: item.addressId
					},
					success: (resp) => {
						uni.showToast({
							title: '删除成功',
						})
						this.selectAddress()
					}
				})
			}
		},
		onLoad(){
			this.selectAddress()
		}
	}
</script>

<style>

</style>
